<template>
    <el-carousel class="homeCarousel" motion-blur>
      <el-carousel-item v-for="item in imageList" :key="item.id" style="height: 40vh">
        <img :src="item.imageUrl" style="width: 100%; height:100%; object-fit:cover;" />
      </el-carousel-item>
    </el-carousel>
</template>

<script>
import image1 from '@/assets/轮播图01.png';
import image2 from '@/assets/轮播图02.jpg';

export default {
  setup() {
    const imageList = [
      { id: 1, imageUrl: image1 },
      { id: 2, imageUrl: image2 },
      { id: 3, imageUrl: image1 },
      { id: 4, imageUrl: image2 },
    ];

    return {
        imageList,
    }
  },
};
</script>

<style>
/* 网页轮播图展示 */
.homeCarouselModule {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40vh;
}

.homeCarousel {
  width: 65%;
  height: 100%;
}
</style>